<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>mango key</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<style type="text/css">
		#tag-cloud{
			width:900px;
			height:600px;
			margin: 0px auto;
		}
	</style>
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="htmleaf-container">
		<div id='tag-cloud'></div>
	</div>
	<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
	<script src="js/jquery.svg3dtagcloud.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$.ajax({  
			  url: "./js/data.js",
			  success: function(msg){
				var data = eval("("+msg+")");
				runing(data);
			  }
			});
		});
    	
		function runing(data){
			var settings = {
                entries: data,
                width: 900,
                height: 600,
                radius: '75%',
                radiusMin: 75,
                bgDraw: true,
                bgColor: '#494A5F',
                opacityOver: 1.00,
                opacityOut: 0.05,
                opacitySpeed: 6,
                fov: 800,
                speed: 0.5,
                fontFamily: 'Oswald, Arial, sans-serif',
                fontSize: '15',
                fontColor: '#fff',
                fontWeight: 'bold',//bold
                fontStyle: 'normal',//italic 
                fontStretch: 'normal',//wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
                fontToUpperCase: true
            };
            $('#tag-cloud').svg3DTagCloud(settings);
		}
        
    </script>
</body>
</html>